<template>
  <div class="grid-row">
    <h3>grid-row布局</h3>
    <div class="grid-row-content">
      <div v-for="item in 9" :key="item" :class="'item' + item">
        {{ item }}
      </div>
    </div>
    <br />
    <pre>
      <font color="red">用法：grid-row 包头不包尾</font>
      grid-row: grid-row-start / grid-row-end;
      grid-row: 1 / 3
      代表第一行到第三行
      grid-row属性定义了网格元素行的开始和结束位置
      grid-row-start属性定义了网格元素行的开始位置
      grid-row-end属性定义了网格元素的结束位置
    </pre>
  </div>
</template>
<script>
export default {
  name: 'GridRow',
  data(){
    return {}
  },
  mounted(){},
  methods: {},
}
</script>
<style lang="less" scoped>
.grid-row {
  &-content {
    display: grid;
    width: 630px;
    grid-template-columns: 1fr 3fr;
    gap: 10px;
    margin-top: 10px;
    div {
      background-color: red;
    }
    .item6 {
      grid-row: 4 / 6;
    }
    .item3 {
      grid-row: 1 / 3;
      grid-column: 2 / 3;
    }
  }
}
</style>
